<template>
	<uni-popup type="bottom" ref="selectAddressRef" :is-mask-click="false" :mask-click="false">
		<view class="select-address-box">
			<view class="header-box">
				<view></view>
				<view class="title-box">选择所在地区</view>
				<view class="close-icon" @tap="close">
					<view class="wlIcon-31guanbi"></view>
				</view>
			</view>
			<view class="main-box">
				<view class="address-info">
					<view class="address-item" @tap="setSelectStatus(0)">
						<view class="strip-item">
							<view
								:class="{
									'show-line': activeProvinvial.name,
									active: activeProvinvial.name
								}"
							></view>
						</view>
						<view
							class="name-box"
							:class="{
								active: selectStatus == 0
							}"
						>
							<text v-if="activeProvinvial.name">
								{{ activeProvinvial.name }}
							</text>
							<text v-else>请选择所在省份</text>
						</view>
						<view class="icon-box">
							<view class="wlIcon-fanhuigengduo"></view>
						</view>
					</view>
					<view
						v-if="activeProvinvial.name"
						class="address-item"
						@tap="setSelectStatus(1)"
					>
						<view class="strip-item">
							<view
								:class="{
									'show-line': activeCity.name,
									active: activeCity.name
								}"
							></view>
						</view>
						<view
							class="name-box"
							:class="{
								active: selectStatus == 1
							}"
						>
							<text v-if="activeCity.name">{{ activeCity.name }}</text>
							<text v-else>请选择所在城市</text>
						</view>
						<view class="icon-box">
							<view class="wlIcon-fanhuigengduo"></view>
						</view>
					</view>
					<view
						v-if="activeCity.name"
						class="address-item"
						@tap="setSelectStatus(2)"
					>
						<view class="strip-item last-strip-item">
							<view
								:class="{
									'show-line': showStreet,
									active: activeArea.name
								}"
							></view>
						</view>
						<view
							class="name-box"
							:class="{
								active: selectStatus == 2
							}"
						>
							<text v-if="activeArea.name">{{ activeArea.name }}</text>
							<text v-else>请选择所在区/县</text>
						</view>
						<view class="icon-box">
							<view class="wlIcon-fanhuigengduo"></view>
						</view>
					</view>
					<view
						v-if="showStreet"
						class="address-item"
						@tap="setSelectStatus(3)"
					>
						<view class="strip-item last-strip-item">
							<view
								:class="{
									active: activeStreet.name
								}"
							></view>
						</view>
						<view
							class="name-box"
							:class="{
								active: selectStatus == 3
							}"
						>
							<text v-if="activeStreet.name">
								{{ activeStreet.name }}
							</text>
							<text v-else>请选择所在乡/镇</text>
						</view>
						<view class="icon-box">
							<view class="wlIcon-fanhuigengduo"></view>
						</view>
					</view>
				</view>
				<view class="address-select-box">
					<scroll-view
						class="content-box"
						:style="{ height: scrollHeight }"
						scroll-y="true"
					>
						<view v-if="selectStatus === 0">
							<view class="select-tip">请选择省份</view>
							<view
								class="select-item"
								:class="{
									active: activeProvinvial.name === i.name
								}"
								v-for="(i,index) in provinvial"
								:key="i.id"
								@tap="changeProvinvial(i,index)"
							>
								{{ i.name }}
							</view>
						</view>
						<view v-else-if="selectStatus === 1">
							<view class="select-tip">请选择城市</view>
							<view
								class="select-item"
								:class="{
									active: activeCity.name === i.name
								}"
								v-for="(i,k) in citys"
								:key="i.id"
								@tap="changeCity(i,k)"
							>
								{{ i.name }}
							</view>
						</view>
						<view v-else-if="selectStatus === 2">
							<view class="select-tip">请选择区/县</view>
							<view
								class="select-item"
								:class="{
									active: activeArea.name === i.name
								}"
								v-for="(i,indexs) in areas"
								:key="i.id"
								@tap="changeArea(i,indexs)"
							>
								{{ i.name }}
							</view>
						</view>
						<view v-else>
							<view class="select-tip">请选择乡/镇</view>
							<view
								class="select-item"
								:class="{
									active: activeStreet.name === i.name
								}"
								v-for="i in streets"
								:key="i.id"
								@tap="changeStreet(i)"
							>
								{{ i.name }}
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
export default {
	emits: ['change'],
	props: {
		address: {
			type: Object,
			require: true,
			default: () => ({
				province: {id:'',name:'',pid:''},
				city: {id:'',name:'',pid:''},
				area: {id:'',name:'',pid:''},
				street: {id:'',name:'',pid:''},
			})
		},
		provinvial: {
			type: Array | Object,
			require: true,
			default: () => {
				return []
			}
		}
	},
	data() {
		return {
			//全部数据
			// provinvial: [], // 省
			cityData: [],
			areaData: [],
			streetsData: [],
			// 筛选后的数据
			citys: [], // 城市
			areas: [], // 区/县
			streets: [], // 镇
			// 选择的省、市、区具体名称
			activeProvinvial: { name: '' }, // 选择中的省份
			activeCity: {name: ''}, // 选中的城市
			activeArea: { name: '' }, // 选中的区县
			activeStreet: { name: '' }, // 选中的乡镇
			//  0 1 2 3 当前正在选择 省 市 区 镇
			selectStatus: 0
		};
	},
	computed: {
		// 高度计算
		scrollHeight() {
			let height = 880;

			if (this.address.province.name) {
				height -= 80;
			}
			if (this.address.city.name) {
				height -= 80;
			}
			if (this.address.area.name && 'street' in this.address) {
				height -= 80;
			}
			return height + 'rpx';
		},
		// 是否展示4级
		showStreet() {
			return Boolean(
				this.selectStatus === 3 ||
					(this.activeArea.name && 'street' in this.address)
			);
		}
	},
	watch: {
		address: {
			handler(newHandler) {
				if(!newHandler) return false;
				if (newHandler.province.id && !this.activeProvinvial.id) {
					this.activeProvinvial = newHandler.province
					// this.setActiveProvinvial();
				}
				if (newHandler.city.id && !this.activeCity.id) {
					this.activeCity = newHandler.city
					// this.setActiveCity();
				}
				if (newHandler.area.id && !this.activeArea.id) {
					this.activeArea = newHandler.area
					// this.setActiveArea();
				}
				if (newHandler.street.id && !this.activeStreet.id) {
					this.activeStreet = newHandler.street
					// this.setActiveStreet();
				}
			},
			immediate: true,
			deep: true
		}
	},
	mounted() {
		this.getProvinvial();
	},
	methods: {
		setData(newHandler) {
			if (newHandler.province.id) {
				this.activeProvinvial = newHandler.province
				// this.setActiveProvinvial();
			}
			if (newHandler.city.id) {
				this.activeCity = newHandler.city
				// this.setActiveCity();
			}
			if (newHandler.area.id) {
				this.activeArea = newHandler.area
				// this.setActiveArea();
			}
			if (newHandler.street.id) {
				this.activeStreet = newHandler.street
				// this.setActiveStreet();
			}
		},
		// 更新正在选择内容的标记
		setSelectStatus(newSelectStatus) {
			this.selectStatus = newSelectStatus;
			if(newSelectStatus == 0) {
				
			} else if(newSelectStatus == 1) {
				const provinceIndex = this.provinvial.findIndex(
					i => i.id == this.address.province.id
				);
				if (provinceIndex !== -1) {
					this.citys = this.provinvial[provinceIndex].city;
				}
			} else if(newSelectStatus == 2) {
				const provinceIndex = this.provinvial.findIndex(
					i => i.id == this.address.province.id
				);
				if (provinceIndex !== -1) {
					this.citys = this.provinvial[provinceIndex].city;
				}
				const cityIndex = this.citys.findIndex(
					i => i.id == this.address.city.id
				);
				if (cityIndex !== -1) {
					this.areas = this.citys[cityIndex].area;
				}
			} else if(newSelectStatus == 3) {
				const provinceIndex = this.provinvial.findIndex(
					i => i.id == this.address.province.id
				);
				if (provinceIndex !== -1) {
					this.citys = this.provinvial[provinceIndex].city;
				}
				const cityIndex = this.citys.findIndex(
					i => i.id == this.address.city.id
				);
				if (cityIndex !== -1) {
					this.areas = this.citys[cityIndex].area;
				}
				const areaIndex = this.areas.findIndex(
					i => i.id == this.address.area.id
				);
				if (areaIndex !== -1) {
					this.streets = this.areas[areaIndex].city;
				}
			}
		},
		// 关闭 popup
		close() {
			this.$refs.selectAddressRef.close();
			this.$emit('close')
			// console.log(this.activeProvinvial,this.activeCity,this.activeArea,this.activeStreet)
		},
		// 打开  popup
		open() {
			this.$refs.selectAddressRef.open();
		},
		// 选择省
		changeProvinvial(i,index) {
			if (i.name !== this.address.province.name) {
				this.activeProvinvial = {
					id:i.id,
					pid:i.pid,
					name:i.name
				};
				this.activeCity = {};
				this.activeArea = {};
				this.activeStreet = {};
				const newAddress = {
					province: {
						id:i.id,
						pid:i.pid,
						name:i.name
					},
					city: '',
					area: ''
				};
				if ('street' in this.address) {
					newAddress.street = '';
				}
				this.$emit('change', newAddress);
			}
			this.getCity(index)
			this.selectStatus = 1;
		},
		// 选择市
		changeCity(i,k) {
			if (i.name !== this.address.city.name) {
				this.activeCity = {
					id:i.id,
					pid:i.pid,
					name:i.name
				};
				this.activeArea = {};
				this.activeStreet = {};
				const newAddress = {
					province: this.activeProvinvial,
					city: {
						id:i.id,
						pid:i.pid,
						name:i.name
					},
					area: ''
				};
				if ('street' in this.address) {
					newAddress.street = '';
				}
				this.$emit('change', newAddress);
			}
			this.getArea(k);
			this.selectStatus = 2;
		},
		// 选择区县
		changeArea(i,index) {
			if (i.name !== this.address.area.name) {
				this.activeArea = {
					id:i.id,
					pid:i.pid,
					name:i.name
				};
				this.activeStreet = {};
				const newAddress = {
					province: this.activeProvinvial,
					city: this.activeCity,
					area: {
						id:i.id,
						pid:i.pid,
						name:i.name
					}
				};
				if ('street' in this.address) {
					newAddress.street = '';
				}
				this.$emit('change', newAddress);
			}

			if ('street' in this.address) {
				this.selectStatus = 3;
				this.getStreets(index)
			} else {
				this.close();
			}
		},
		// 选择乡镇
		changeStreet(i) {
			if (i.name !== this.address.street.name) {
				this.activeStreet = {
					id:i.id,
					pid:i.pid,
					name:i.name
				};
			}
			this.$emit('change', {
				province: this.activeProvinvial,
				city: this.activeCity,
				area: this.activeArea,
				street: {
					id:i.id,
					pid:i.pid,
					name:i.name
				}
			});
			this.close();
		},
		// 省份数据获取
		getProvinvial() {
			// uni.request({
			//     url: '/wanlshop/common/area',
			//     success: (res) => {
			// 		if(res.data.length > 0){
			// 			this.provinvial = res.data
			// 		}else{
			// 			this.$wanlshop.msg('数据表area为空，请在后台安装示例插件')
			// 		}
			//     }
			// });
			
			// uni.request({
			// 	url: provinvialUrl
			// }).then(res => {
			// 	console.log(res);
			// 	this.provinvial = res.data;
			// 	this.setActiveProvinvial();
			// 	this.getCity();
			// });
		},
		// setActiveProvinvial
		setActiveProvinvial() {
			if (this.address.province.name && this.activeProvinvial.id) {
				const provinceIndex = this.provinvial.findIndex(
					i => i.name == this.address.province.name
				);
				if (provinceIndex !== -1) {
					this.cityData = this.provinvial[provinceIndex].city;
				}
			}
		},
		// 城市数据获取
		getCity(index) {
			this.citys = this.provinvial[index].city
			// uni.request({
			// 	url: cityUrl
			// }).then(res => {
			// 	this.cityData = res.data;
			// 	this.setActiveCity();
			// 	this.getArea();
			// });
		},
		setActiveCity() {
			console.log(this.cityData);
			if (this.cityData && this.cityData.length === 0) {
				return;
			}

			this.citys = this.cityData.filter(
				item => item.pid === this.activeProvinvial.id
			);

			if (this.address.city.name && this.activeCity.id) {
				const cityIndex = this.cityData.findIndex(
					i =>
						i.name == this.address.city.name
				);
				if (cityIndex !== -1) {
					this.areaData = this.cityData[cityIndex].area;
				}
			}
		},
		// 区县数据
		getArea(index) {
			this.areas = this.citys[index].area
			// uni.request({
			// 	url: areaUrl
			// }).then(res => {
			// 	this.areaData = res.data;
			// 	this.setActiveArea();

			// 	if ('street' in this.address) {
			// 		this.getStreets();
			// 	}
			// });
		},
		setActiveArea() {
			if (this.areaData.length === 0) {
				return;
			}
			this.areas = this.areaData.filter(
				item => item.pid === this.activeCity.id
			);
			if (this.address.area.name && this.activeArea.id) {
				const areaIndex = this.areaData.findIndex(
					i =>
						i.name == this.address.area.name
				);
				if (areaIndex !== -1) {
					this.streetsData = this.areaData[areaIndex].city;
				}
			}
		},
		// 镇 社区
		getStreets(index) {
			this.streets = this.areas[index].city
			// uni.request({
			// 	url: streetsUrl
			// }).then(res => {
			// 	this.streetsData = res.data;
			// 	this.setActiveStreet();
			// });
		},
		setActiveStreet() {
			if (this.streetsData.length === 0) {
				return;
			}
			this.streets = this.streetsData.filter(
				item => item.pid === this.activeArea.id
			);
		}
	}
};
</script>

<style lang="scss">
.select-address-box {
	height: 1100rpx;
	border-top-left-radius: 20rpx;
	border-top-right-radius: 20rpx;
	background-color: #fff;
	padding: 30rpx 0;

	.header-box {
		display: flex;
		justify-content: space-between;
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 40rpx;
		padding: 0 20rpx;

		> .title-box {
			font-size: 36rpx;
		}

		.iconfont {
			color: #72899b;
		}
	}

	.main-box {
		.address-info {
			padding: 0 20rpx;

			> .address-item {
				display: flex;
				align-items: center;
				height: 80rpx;

				.strip-item {
					color: #333;
					margin-right: 48rpx;
					position: relative;

					> view {
						width: 12rpx;
						height: 12rpx;
						border-radius: 50%;
						border: 2rpx solid #086df7;
						transition: all 0.25s;
						box-sizing: border-box;
					}

					.show-line {
						&::after {
							content: '';
							position: absolute;
							top: 100%;
							left: 50%;
							width: 2rpx;
							height: 69rpx;
							background-color: #086df7;
						}

						/* #ifndef H5*/
						&::after {
							transform: translateX(-50%);
						}
						/* #endif */

						/* #ifdef VUE2 */
						&::after {
							transform: translateX(-50%);
						}
						/* #endif */
					}

					.active {
						background: #086df7;
					}
				}

				.name-box {
					font-size: 28rpx;
					flex: 1;
				}

				.active {
					color: #086df7;
				}

				.icon-box {
					.iconfont {
						font-size: 24rpx;
						color: #72899b;
					}
				}
			}
		}

		.address-select-box {
			padding: 20rpx;
			border-top: 2rpx solid #d4d4d4;

			.content-box {
				height: 600rpx;

				.select-tip {
					font-size: 32rpx;
					color: #333;
					font-weight: bold;
					padding-bottom: 20rpx;
				}

				.select-item {
					padding: 20rpx 20rpx;
					font-size: 28rpx;
					color: #333;
				}

				.active {
					color: #086df7;
				}
			}
		}
	}
}
</style>
